<template>
  <view class="container">
    <navbar title="服务分类" color="#333333">
      <view class="left-icon" slot="leftIcon" style="position: absolute">
        <view class="logo"> LOGO </view>
      </view>
    </navbar>
    <view class="search" @click="gotoSearch">
      <headerSearch
        placeholder="输入关键词进行搜索"
        bgColor="#F5F5F5"
      ></headerSearch>
    </view>
    <view class="content">
      <view class="list_left">
        <view
          class="item one-row"
          v-for="(item, i) in categoryList"
          :class="item.id == categoryId ? 'select' : ''"
          :key="i"
          @click="categoryChange(item)"
        >
          {{ item.label }}
        </view>
      </view>
      <view class="list_right">
        <view class="screen">
          <view class="tab">
            <view
              class="tab-item"
              :class="tab == 1 ? 'select' : ''"
              @click="tabClick(1)"
            >
              <text>综合</text>
            </view>
            <view
              class="tab-item"
              :class="tab == 2 ? 'select' : ''"
              @click="tabClick(2, sort)"
            >
              <text>价格</text>
              <image
                v-if="sort_price == 1"
                :src="$img_path('/course/sort_1.png')"
                mode="widthFix"
              ></image>
              <image
                v-if="sort_price == 2"
                :src="$img_path('/course/sort_2.png')"
                mode="widthFix"
              ></image>
            </view>
            <view
              class="tab-item"
              :class="tab == 3 ? 'select' : ''"
              @click="tabClick(3, sort)"
            >
              <text>销量</text>
              <image
                v-if="sort_num == 1"
                :src="$img_path('/course/sort_1.png')"
                mode="widthFix"
              ></image>
              <image
                v-if="sort_num == 2"
                :src="$img_path('/course/sort_2.png')"
                mode="widthFix"
              ></image>
            </view>
            <view class="tab-item box-style" @click="tabClick(4, box_style)">
              <image
                class="s_i-img"
                v-if="box_style == 1"
                :src="$img_path('/course/s_i_1.png')"
                mode="widthFix"
              ></image>
              <image
                class="s_i-img"
                v-if="box_style == 2"
                :src="$img_path('/course/s_i_2.png')"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" :style="{ '--m-h': list_m_h + 'px' }">
          <view class="goodsList">
            <view
              class="item-box"
              :class="box_style == 2 ? 'column-class' : 'row-class'"
              v-for="(item, i) in goodsList"
              :key="i"
              :style="{ width: box_style == 2 ? '100%' : '258rpx' }"
            >
              <home-goods-box
                :type="box_style == 2 ? 'col' : 'row'"
                :imageStyle="{
                  width: box_style == 2 ? '232rpx' : '258rpx',
                  height: box_style == 2 ? '232rpx' : '232rpx',
                }"
                :goods="item"
              ></home-goods-box>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <tarbar index="2" page="1"></tarbar>
  </view>
</template>

<script>
import headerSearch from "../../components/header-search/header-search.vue";
import {
  getShopCategoryList,
  getServiceGoodsList,
} from "../../utils/api/serviceApi";
import shopGoods from "@/components/service-box/mall-item-box.vue";
export default {
  components: {
    headerSearch,
    shopGoods,
  },
  data() {
    return {
      list_m_h: this.statusBarHeight + this.bottomHeight + this.navBarHeight,
      sort_price: 1,
      sort_num: 1,
      tab: 1,
      box_style: 1,
      searchValue: "",

      categoryId: 1,
      categoryList: [],

      goodsList: [],
    };
  },
  onLoad() {
    this.getCategoryList();
  },
  methods: {
    tabClick(type, val) {
      switch (type) {
        case 1:
          break;
        case 2:
          if (this.tab == type) {
            if (this.sort_price == 1) {
              this.sort_price = 2;
            } else {
              this.sort_price = 1;
            }
          }
          break;
        case 3:
          if (this.tab == type) {
            if (this.sort_num == 1) {
              this.sort_num = 2;
            } else {
              this.sort_num = 1;
            }
          }
          break;
        default:
          if (this.box_style == 1) {
            this.box_style = 2;
          } else {
            this.box_style = 1;
          }
          break;
      }
      if (type != 4) {
        this.tab = type;
      }
    },

    categoryChange(item) {
      this.categoryId = item.id;
      console.log("this.categoryId", this.categoryId);
      this.getServiceGoodsList();
    },

    async getCategoryList() {
      try {
        const res = await getShopCategoryList();
        console.log("res", res);
        this.categoryList = res.data;
        if (this.categoryList.length) {
          this.categoryId = this.categoryList[0].id;
          this.getServiceGoodsList();
        }
      } catch (e) {
        //TODO handle the exception
        console.log("获取商品分类失败", e);
      }
    },

    async getServiceGoodsList() {
      try {
        const params = {
          name: "",
          category_id: this.categoryId,
          is_price: 1,
          is_rank: 1,
        };
        const res = await getServiceGoodsList(params);
        console.log("商品列表", res);
        this.goodsList = res.data;
      } catch (e) {
        //TODO handle the exception
        console.log("获取商品列表失败", e);
      }
    },

    gotoSearch() {
      uni.navigateTo({
        url: "/pagesService/search/search",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .left-icon {
    left: 22rpx;
    width: 142rpx;
    height: 68rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.04);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // padding: 20rpx 30rpx 0;
  box-sizing: border-box;

  .search {
    padding: 20rpx 22rpx 34rpx;
    box-sizing: border-box;
    background-color: #ffffff;
  }

  .content {
    width: 100%;
    // margin-top: 32rpx;
    display: flex;
    flex: 1;

    .list_left {
      width: 174rpx;
      height: calc(100vh - 190rpx - var(--m-h));
      overflow-y: auto;
      margin-top: -20rpx;

      .item {
        width: 100%;
        height: 114rpx;
        // margin-bottom: 28rpx;
        // background-color: #FFFFFF;
        // border-radius: 10rpx;
        // font-weight: bold;
        font-size: 30rpx;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        // padding-left: 18rpx;

        &.select {
          background-color: #ffffff;
          color: #e72a2a;
		  font-weight: 600;
        }
      }
    }

    .list_right {
      width: calc(100% - 174rpx);
      padding: 0 22rpx;
      box-sizing: border-box;
      background-color: #ffffff;

      .screen {
        // padding: 30rpx 0rpx 0;
        .tab {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10rpx 24rpx 14rpx;
          // background-color: #FFFFFF;
          border-radius: 10rpx;

          // margin-bottom: 32rpx;
          .tab-item {
            display: flex;
            justify-content: center;
            align-items: center;

            text {
              font-weight: bold;
              font-size: 32rpx;
              color: #999999;
              line-height: 44rpx;
            }

            &.select {
              text {
                color: #e72a2a;
				font-weight: 600;
              }
            }

            image {
              width: 30rpx;
              height: 30rpx;
            }
          }
        }
      }

      scroll-view {
        width: 100%;
        max-height: calc(100vh - 296rpx - var(--m-h));
      }

      .goodsList {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item-box {
          box-sizing: border-box;
          margin-bottom: 20rpx;

          &.column-class {
            padding: 20rpx 0;
            border-bottom: 2rpx solid #f8f8f8;

            &:first-child {
              padding-top: 0;
            }
          }

          &.row-class {
            // border: 2rpx solid #F3F3F3;
            // border-radius: 20rpx;
          }

          .tagList {
            display: flex;
            align-items: center;
            margin-top: 16rpx;

            .tag-item {
              // width: 118rpx;
              height: 34rpx;
              border-radius: 6rpx 6rpx 6rpx 6rpx;
              border: 2rpx solid #0291ff;
              font-weight: 400;
              font-size: 20rpx;
              color: #0291ff;
              // line-height: 34rpx;
              text-align: center;
              padding: 3rpx 12rpx;
              box-sizing: border-box;
              margin-left: 12rpx;

              &:first-child {
                background: #ff6602;
                border-color: #ff6602;
                color: #ffffff;
                margin-left: 0;
              }
            }
          }
        }
      }
    }
  }
}

.s_i-img {
  padding: 10rpx 20rpx;
}
</style>